<template>
  <el-dialog :title='title' class='c-dialog-fixed print' :visible.sync='show' :append-to-body='inDialog' width='60%'
    @open='openDialog' @close='closeDialog'>
    <div v-loading='loading' style='position: relative;'>
      <el-alert class='no-print' title='为避免打印格式出现异常，请使用Firefox（火狐）浏览器打印' type='success' style='margin-bottom:10px'>
      </el-alert>
      <div class="record-box" :class='{ "no-print": selectMode && !item.selected }' v-for='item in list' :key='item.id'>
        <el-checkbox class='no-print' size='mini' style="position: absolute;right:10px;top:8px;z-index: 99"
          v-model="item.selected" border v-show='selectMode'>
          选择
        </el-checkbox>
        <div>
          <div style='font-size:22px;text-align: center;font-weight: bold'>IT资产交还单</div>
          <div style='margin: 5px 0px'>
            <div style='display: flex'>
              <div style='flex:1'>交还编号：{{ item.no }}</div>
              <div style='flex:1'>录入员：{{ item.create_user_name }}</div>
              <div style='flex:1'>打印时间：{{ $commonJs.formatDate(new Date()) }}</div>
            </div>
            <div style='display: flex'>
              <div style='flex:1'>交还日期：{{ item.record_date }}</div>
            </div>
            <div>归还地点：{{ item.place }}</div>
            <div>交还备注：{{ item.remarks }}</div>
          </div>
          <table class='c-table' style='border:2px solid #000'>
            <tr class='label'>
              <td style='width:40px'>序号</td>
              <td style='width:80px'>资产编号</td>
              <td>资产型号</td>
              <td>资产类型</td>
              <td>交还部门</td>
              <td>交还人</td>
              <td style='width:60px'>交还数量</td>
            </tr>
            <tr v-for='(a, index) in item.asset_list'>
              <td style='text-align: center'>{{ index + 1 }}</td>
              <td>{{ a.asset_no }}</td>
              <td>{{ a.asset_model }}</td>
              <td>{{ a.asset_type_name }}</td>
              <td>{{ a.dep_name }}</td>
              <td>{{ a.employee_name }}</td>
              <td style='text-align: center'>{{ Number(a.amount) }}</td>
            </tr>
          </table>
          <div style='display:flex;margin:5px 0px'>
            <div style='flex:1'>交还人签字：</div>
            <div style='flex:1;text-align: right;padding-right: 150px'>签字时间：</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div style='clear: both'></div> -->
    </div>
    <span slot="footer">
      <el-button type='primary' @click="print">打 印</el-button>
      <el-tooltip content='开启后，可选择个别标签进行单独打印'>
        <el-checkbox v-model="selectMode" border>选择模式</el-checkbox>
      </el-tooltip>
      <el-button @click="show = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import assetApi from '@/api/it/assetReturnRecord'
export default {
  components: {},
  props: {
    inDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectMode: false,
      show: false,
      loading: false,
      list: [],
      resolve: null
    }
  },
  computed: {
    title() {
      return 'IT资产交还单打印'
    },
    buttonText() {
      return this.isEdit ? '更 新' : '创 建'
    }
  },
  methods: {
    open() {
      this.show = true
      return new Promise((resolve, reject) => {
        this.resolve = resolve
      })
    },
    getData(params) {
      this.loading = true
      assetApi.getPrintRecordList({ ...params, noPage: 1 }).then(res => {
        this.loading = false
        this.list = res.data.list
      })
      return this
    },
    openDialog() {
      this.$nextTick(() => {
        if (this.resolve) {
          this.resolve(this)
        }
      })
    },
    closeDialog() {
      this.selectMode = false
      this.imgLoadCount = 0
      this.list = []
    },
    save() {
      this.buttonLoading = true
      this.$refs.form.save().catch(() => {
        this.buttonLoading = false
      })
    },
    print() {
      window.print()
    }
  }
}
</script>
<style lang='scss' scoped>
	.record-box {
	  color: #000;
	  line-height: 1.5;
	  font-family: '宋体';
	  position: relative;
	  font-size: 14px;
	  padding: 10px;
	  border-radius: 4px;
	  border: 1px solid black;
	  margin-bottom: 10px;
	}

	@media print {
	  .record-box {
	    border: 1px solid #fff;
	    page-break-inside: avoid;
	  }

	  .print {
	    width: 210mm;
	  }
	}
</style>